<template>
	<view class="shop-page">
		<!-- 搜索框 -->
		<view class="search-content">

			<image class="search-img" src="../../static/会员卡商城加套餐卡/组合 405.png" mode=""></image>
			<input placeholder="搜索您想要的商品" v-model="searchVal" @input="changeInput" @confirm="changeSearch"
				style="width: auto;line-height: 1em; " placeholder-style="font-size:28rpx;color:#A1A1A1;" />
			<image v-if="searchVal" class="icon_close" src="/static/delect.png" @click="close"></image>
		</view>
		<!-- 轮播图 -->
		<view class="carouselChart">
			<liu-slide-img :list="listPoster" :autoplay="autoplay" :interval="interval"
				@click="clickSlideImg"></liu-slide-img>
		</view>

		<view class="padding10">
			<!-- 商品分类 -->
			<view class="productClassification flex-wrap-flex-start">

				<view  class="flex-column " style="padding: 36rpx;" v-for="(item,i) in classifyList" :key="i" @click="classifyFn(item)" >
					
						<view style="color: #fff;font-size: 36rpx;">
							<image class="avaterIcon" :src="item.img" mode=""></image>
						</view>
						<view style="color: rgb(0, 0, 0);font-size: 24rpx;">
							{{item.name}}
						</view>
					
				
				</view>

			</view>
			<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
				@up="upCallback" :up="upOption" :down="downOption">
				<!-- 商品展示列表 -->

				<view class="productList flex-wrap-justifyBetween">
					<block v-for="(item,index) in list" :key="index">
						<view class="product" @click="navDetailPage(item)">
							<image class="productImg" :src="item.host_img[0]" mode=""></image>
							<view class="font-overflow2 margin-bottom_10rpx">
								{{item.name}}
							</view>
							
							<!-- 优惠券 -->
							<view class="flex-start">
								<view v-if="item.coupon_list.length" class="couponLabelRed font-overflow">

									{{totelName(item.coupon_list[0].discount_intensity)+'元优惠券'}}
								</view>
								<!-- 1允许积分抵现 2 不允许', -->
								<view v-if="item.buying_pattern==1" class="couponLabelOrange  font-overflow">

									积分+现金
								</view>
							</view>
							<!-- 销量 -->
							<view class="flex-between inventory">
								<view class="font-overflow">

									销量 {{item.sales_volume}}
								</view>
								<view class="font-overflow">

									库存 {{item.inventory}}
								</view>
							</view>
							<!-- 价格 -->
							<view class="price">
								<view class="font-overflow">

									￥ {{item.price}}
								</view>

							</view>
						</view>

					</block>
				</view>



			</mescroll-body>
		</view>

	</view>
</template>

<script>
	import TabBar from '../../components/jinjie-tabbar/jinjie-tabbar.vue'
	export default {
		components: {
			TabBar
		},
		data() {
			return {
				downOption: {
					auto: true
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				windowHeight: '',
				list: [],
				token: uni.getStorageSync('login').token,
				tabIndex: 1,
				searchVal: '',
				// 轮播图
				list: [],
				autoplay: true,
				interval: 3000,
				listPoster:[],
				// 数据明细
				menuNavigationList: [{
						img: '../../static/会员卡商城加套餐卡/858.png',
						text: '谷类杂粮',
						type: 0
						// url: '/pages/statistics/index/index'
					},
					{
						img: '../../static/会员卡商城加套餐卡/Mask group-1.png',
						text: '新鲜油品',
						// url: '/pages/merchantConfiguration/merchantConfiguration',
						type: 9
					},
					{
						img: '../../static/会员卡商城加套餐卡/Mask group.png',
						text: '干菜类',
						type: 10
						// url: '/pages/withdrawal/withdrawa-account/withdrawa-account'
					},
					{
						img: '../../static/会员卡商城加套餐卡/8589.png',
						text: '生鲜水果',
						type: 11
						// url: '/pages/service-area/service-area'
					},

				],
				classifyList: []
			}
		},
		onLoad() {

		},
		onShow() {
			
			
		},
		created() {
			
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 800;
				}
			});
		},
		mounted() {
			this.$nextTick(()=>{
				this.mescroll?.resetUpScroll();
			})
			this.init()
		},
		computed: {
			totelName: function() {
				return function(nums) {
					let num
					if (nums.endsWith(".00")) {
						num = nums.slice(0, -3); // 去除末尾的 ".00"
					}
					if (nums >= 10000) {
						let remainder = num % 10000;
						let quotient = Math.floor(num / 10000);
						let decimal = Math.floor(remainder / 1000);
						return quotient + '.' + decimal + '万';
					} else {
						console.log(nums)
						return num?num:nums;
					}
				};
			},
			extractedDate: function() {
				return function(time) {
					console.log(time)
					return time.split(' ')[0];
				};
			}
		},
		methods: {
			changeInput(e) {
				console.log(e)
				this.searchVal = e.detail.value
				this.mescroll?.resetUpScroll();
			},
			// 获取轮播图
			async init() {
				const resPoster = await this.$http.post({
					url: this.$api.poster,
					data: {

						type: 2

					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})

				if (resPoster.code == 0) {



					console.log(resPoster.data)
					// 	// 展示区域  1 首页 2 商城 3 套餐卡市场 这里还需要区分

					this.listPoster = resPoster.data.filter(item => item.type == 2);

					// this.$sun.toast(resPoster.msg, 'none')


				} else {

					this.$sun.toast(resPoster.msg, 'none')
				}

				const resClass = await this.$http.post({
					url: this.$api.classifyList,
					data: {



					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})

				if (resClass.code == 0) {



					console.log(resClass.data)

					this.classifyList = resClass.data
					// this.$sun.toast(resPoster.msg, 'none')


				} else {

					this.$sun.toast(resPoster.msg, 'none')
				} 
				// goodsList

			},
			classifyFn(items){
				console.log(items)
				this.$sun.navGo('/pages/shop/shopMore',{...items})
			},
			// 轮播图列表
			async upCallback(scroll) {
				const result = await this.$http.post({
					url: this.$api.goodsList,
					data: {
						page: scroll.num,
						limit: 1000,
						name:this.searchVal
					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}
								
				})
					
								
				if (result.code == 0) {
				
					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];
					result.data.list.forEach((item)=>{
						item.host_img=item.host_img.split(',').map((item) => item.trim());
					})
					this.list = this.list.concat(result.data.list);
					
					console.log('this.list', this.list, this.list.length);
				}
				
			
			},
			// 点击轮播图
			clickSlideImg(e) {
				// 跳本地 ， 2 跳h5 ，3 跳小程序
				if (e.jump_way == 1) {
					this.$sun.toast('目前暂不支持本地跳转', 'none')
				} else if (e.jump_way == 2) {
					window.location.href = e.link
				} else {
					// 跳转小程序
					this.$sun.toast('跳转小程序', 'none')
				}
				console.log(e)
			},
			navDetailPage(items) {
				this.$sun.navGo('/pages/shop/shoplDetailsPage/shoplDetailsPage',{...items})
			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		background: #fff;
	}

	.shop-page {
		background-color: #fff;
      
		padding-top: 30rpx;
		.search-content {
			justify-content: center;
			display: flex;
			align-items: center;
			width: 700rpx;
			height: 88rpx;
			margin: 0 30rpx 30rpx;
			background: #f6f6f6;
			border-radius: 84rpx;
			

			.search-img {
				width: 30rpx;
				height: 30rpx;
				margin-right: 20rpx;
				margin-left: 40rpx;
			}

			.icon_close {
				padding: 0rpx 15rpx;
				width: 36rpx;
				height: 36rpx;
				margin-right: 30rpx;
			}
		}
	}

	.padding10 {
		padding: 0 20rpx;

		.productList {
			margin-top: 40rpx;

			.product {
				width: 336rpx;
				margin-bottom: 15rpx;

				.productImg {
					width: 336rpx;
					height: 336rpx;
				}

				.couponLabelRed {
					padding: 0 10rpx;

					max-width: 160rpx;
					height: 45rpx !important;
					line-height: 45rpx;
					text-align: center;
					font-size: 24rpx;
					font-weight: 400;
					height: 38rpx;
					background-color: rgb(255, 238, 238);
					color: rgb(255, 0, 0);
				}

				.couponLabelOrange {
					padding: 0 10rpx;
					margin-left: 20rpx;
					max-width: 160rpx;
					height: 45rpx !important;
					line-height: 45rpx;
					text-align: center;
					font-size: 24rpx;
					font-weight: 400;
					height: 38rpx;
					background-color: rgb(255, 248, 238);
					color: rgb(255, 149, 0);
				}

				.inventory {
					margin: 10rpx 0;
					font-size: 24rpx;
					font-weight: 400;
					color: rgb(153, 153, 153);
				}

				.price {
					color: rgb(255, 0, 0);
				}
			}
		}

		.productClassification {
			margin-top: 36rpx;

			.avaterIcon {
				width: 102rpx;
				height: 102rpx;
				margin-bottom: 14rpx;
			}
		}
	}
</style>